<template>
  <div>
    <div style="background-color: #ffffff;padding: 24px 16px">
      <div style="font-size: 16px;line-height: 16px;color: rgba(0, 0, 0, 0.85);font-weight: 500;">
        一单多商品运费计算规则
      </div>
      <div style="margin-top: 10px;font-size: 10px">
        <a-radio-group v-model="multiPrdRule">
          <a-radio value="01">
            <span>按最高商品运费</span>
            <a-icon type="question-circle"/>
          </a-radio>
          <a-radio value="02">
            <span>所有商品运费叠加</span>
            <a-icon type="question-circle"/>
          </a-radio>
        </a-radio-group>
      </div>
    </div>

    <a-card title="运费模板" style="padding: 0px 0px;margin-top: 16px" :bordered="false">
      <template v-slot:extra>
        <a-button type="primary" @click="addTmpModalVisible = !addTmpModalVisible">添加模板</a-button>
      </template>
      <div v-for="(row,index) in expressTmpList" :key="index" style="width: 100%;height: 55px">
        <div style="width: 80%;height: 55px;float: left;margin-bottom: 12px;margin-top: 12px">
          <span style="line-height: 30px;font-size: 18px">{{ row.tmpName }}</span>
          <span
            v-if="defaultTmpNo == row.tmpNo"
            style="margin-right: 30px;font-size: 12px">(默认) &nbsp;&nbsp;&nbsp;</span>
          <span
            v-if="defaultTmpNo == row.tmpNo"
            class="ant-tag"
            style="background: rgb(227, 238, 252); color: rgb(25, 102, 255); border: none;font-weight: 500;">默认模板</span>
          <br/>
          <span style="margin-right: 20px;font-size: 12px">发货地区：{{ row.sendArea.join(",") }}</span>
          <span v-if="defaultTmpNo == row.tmpNo" style="font-size: 12px">默认模板不支持修改时间</span>
        </div>
        <div
          style="width: 20%;height: 55px;float: right;text-align: center;line-height: 55px;margin-top: 12px;margin-bottom: 12px">
          <a-dropdown v-if="defaultTmpNo != row.tmpNo">
            <a class="ant-dropdown-link" @click="e => e.preventDefault()">操作 </a>
            <template v-slot:overlay>
              <a-menu>
                <a-menu-item>
                  <a @click="handleDeleteTmp(row.tmpNo,index)">删除</a>
                </a-menu-item>
                <a-menu-item>
                  <a @click="handleDefaultTmp(row.tmpNo)">设为默认</a>
                </a-menu-item>
              </a-menu>
            </template>
          </a-dropdown>
        </div>
        <a-divider v-if="expressTmpList.length > 0 && index != (expressTmpList.length - 1)"/>
      </div>
    </a-card>

    <a-modal
      title="添加模板"
      :width="700"
      :visible="addTmpModalVisible"
      :closable="false"
      @ok="handleAddTmp"
      @cancel="addTmpModalVisible = !addTmpModalVisible">
      <a-form :label-col="labelCol" :wrapper-col="wrapperCol">
        <a-form-item label="模板名称">
          <a-input v-model="addTmpForm.tmpName" :style="{width:'400px',borderRadius:'4px'}" placeholder="请输入模板名称"/>
        </a-form-item>
        <a-form-item label="发货地区">
          <Cascader
            v-model="addTmpForm.sendAreaArray"
            :options="options"
            :style="{width:'400px',borderRadius:'4px'}"
            placeholder="请输入发货地区"/>
        </a-form-item>
        <a-form-item label="运费设置">
          <a-radio-group v-model="addTmpForm.sendPriceType">
            <a-radio value="01">
              阶梯计价
            </a-radio>
            <a-radio value="02">
              固定运费
            </a-radio>
            <a-radio value="03">
              买家包邮
            </a-radio>
          </a-radio-group>
        </a-form-item>
        <a-form-item label="计价方式">
          <a-radio-group v-model="addTmpForm.sendUnit">
            <a-radio value="01">
              按件数
            </a-radio>
            <a-radio value="02">
              按重量
            </a-radio>
          </a-radio-group>
        </a-form-item>
        <a-form-item label="默认运费">
          <a-input v-model="addTmpForm.defCount" :style="{width:'40px'}"/>
          件以内，
          <a-input v-model="addTmpForm.defPrice" :style="{width:'40px'}"/>
          元，每增加
          <a-input v-model="addTmpForm.unitCount" :style="{width:'40px'}"/>
          件，增加运费
          <a-input v-model="addTmpForm.unitPrice" :style="{width:'40px'}"/>
          元
        </a-form-item>
        <a-form-item label="指定地区运费">
          <Cascader
            v-model="addTmpForm.targetAreaArray"
            :options="options"
            :style="{width:'400px',borderRadius:'4px'}"
            placeholder="请输入指定地区运费"/>
        </a-form-item>
        <a-form-item label="限制地区下单">
          <Cascader
            v-model="addTmpForm.limitAreaArray"
            :options="options"
            :style="{width:'400px',borderRadius:'4px'}"
            placeholder="请输入限制地区下单"/>
        </a-form-item>
        <a-form-item label="指定条件包邮">
          <Cascader
            v-model="addTmpForm.freeAreaArray"
            :options="options"
            :style="{width:'400px',borderRadius:'4px'}"
            placeholder="请输入指定条件包邮"
          />
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>

<script>
  import { Cascader } from 'ant-design-vue'
  import { queryRule, mergeRule, queryTmp, deleteTmp, addTmp } from '@/api/express'

  const options = [
    {
      value: '全国',
      label: '全国'
    },
    {
      value: '直辖市',
      label: '直辖市',
      children: [
        { value: '北京', label: '北京' },
        { value: '上海', label: '上海' },
        { value: '天津', label: '天津' },
        { value: '重庆', label: '重庆' }
      ]
    },
    {
      value: '江苏',
      label: '江苏',
      children: [
        { value: '南京', label: '南京' },
        { value: '苏州', label: '苏州' },
        { value: '无锡', label: '无锡' },
        { value: '常州', label: '常州' },
        { value: '徐州', label: '徐州' },
        { value: '扬州', label: '扬州' },
        { value: '南通', label: '南通' },
        { value: '盐城', label: '盐城' },
        { value: '泰州', label: '泰州' },
        { value: '镇江', label: '镇江' },
        { value: '淮安', label: '淮安' },
        { value: '宿迁', label: '宿迁' },
        { value: '连云港', label: '连云港' }
      ]
    }
  ]

  export default {
    name: 'Template',
    components: {
      Cascader
    },
    data () {
      return {
        defaultTmpNo: '',
        multiPrdRule: '01',
        expressTmpList: [],

        options,

        addTmpModalVisible: false,
        addTmpForm: {
          tmpName: '',
          sendArea: '',
          sendPriceType: '01',
          sendUnit: '01',
          defCount: '',
          defPrice: '',
          unitCount: '',
          unitPrice: '',
          targetArea: '',
          limitArea: '',
          freeArea: '',
          sendAreaArray: [],
          targetAreaArray: [],
          limitAreaArray: [],
          freeAreaArray: []
        },
        labelCol: { span: 4 },
        wrapperCol: { span: 20 }
      }
    },
    methods: {
      handleDeleteTmp (tmpNo, index) {
        deleteTmp({ tmpNo }).then(rsp => {
          this.$message.success('删除成功')
          this.expressTmpList.splice(index, 1)
        })
      },
      handleDefaultTmp (tmpNo) {
        mergeRule({ defaultTmpNo: tmpNo }).then(rsp => {
          this.$message.success('修改成功')
          this.defaultTmpNo = tmpNo
        })
      },
      handleAddTmp () {
        this.addTmpForm.sendArea = this.addTmpForm.sendAreaArray.join(',')
        this.addTmpForm.targetArea = this.addTmpForm.targetAreaArray.join(',')
        this.addTmpForm.limitArea = this.addTmpForm.limitAreaArray.join(',')
        this.addTmpForm.freeArea = this.addTmpForm.freeAreaArray.join(',')
        addTmp(this.addTmpForm).then(rsp => {
          this.addTmpModalVisible = !this.addTmpModalVisible
          this.$message.success('新增成功')
          this.addTmpForm = {}
          queryTmp({}).then(rsp => {
            this.expressTmpList = rsp
          })
        })
      }
    },
    mounted () {
      queryRule({}).then(rsp => {
        this.defaultTmpNo = rsp.defaultTmpNo
        this.multiPrdRule = rsp.multiPrdRule
      })
      queryTmp({}).then(rsp => {
        this.expressTmpList = rsp
      })
    },
    watch: {
      multiPrdRule: function (newVal) {
        if (newVal) {
          mergeRule({ multiPrdRule: newVal }).then(rsp => {
          })
        }
      }
    }
  }
</script>

<style scoped>
  .ant-card-body {
    padding: 0px 24px !important;
  }
</style>
